<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>IT服务知识库文件详情页图片视频</title>
		<!--公用样式-->
		<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
		<!--页面样式-->
		<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css" />
		<!--Layui-->
		<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
		<style>
			.break {
				margin-left:1%;
				width: 45%;
				word-break: break-all;
			}
			.photo-bg{
				width:100%;
				height:100%;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				}
			.pt2px{
				 padding-top: 2px;
			}
		</style>
	</head>

	<body>
		<!--容器-->
		<div class="container clearfix"  style="margin-left:3%;width:97%;">
			<!--占位-->
<!--			<div class="headerHightAdd"></div>-->
			<div class="itDeta clearfix">
				<div id="fileName" fileName="${selectFile.fileName}" class="ft26">${selectFile.fileName}</div>
				<div class="itDetaLf whitebg mt20 fl">
					<div class="ft20 bold">基本信息</div>
					<input type="hidden" id="id" value="${selectFile.id}">
					<ul>
						<li class="clearfix">
							<label class="gary fl">创建者：</label>
							<span class="fl pt2px">${selectFile.createBy}</span>
						</li>
						<li class="clearfix">
							<label class="gary fl">创建时间：</label>
							<span class="fl pt2px" style="width: 45%">${selectFile.createDate?string("yyyy-MM-dd hh:mm")}</span>
						</li>
						<li class="clearfix">
							<label class="gary fl">文档编号：</label>
							<span class="fl break pt2px">${selectFile.fileNumber}</span>
						</li>
						<li class="clearfix">
							<label class="gary fl">文档路径：</label>
							<span class="fl w80p break">${thisFilePath}</span>
						</li>
						<li class="clearfix">
							<label class="gary fl">关键字：</label>
							<span class="fl break pt2px">${selectFile.searchKey}</span>
						</li>
						<li class="clearfix">
							<label class="gary fl">说明：</label>
							<span class="fl break pt2px">${selectFile.remark}</span>
						</li>
					</ul>
				</div>
				<div class="itDetaCenter whitebg mt20 fl">
					<div class="clearfix">
						<#if '${selectFile.fileCollect}'=='0'>
							<button type="button" state="0" id="collect" class="fr bluebg white">收藏</button>
						<#elseif '${selectFile.fileCollect}'=='1'>
							<button type="button" state="1" id="collect" class="fr greenbg white">取消收藏</button>
						</#if>
						<@shiro.hasPermission name ="it:searching">
						<button type="button" id="searching" class="fr greenbg white">检索设置</button>
						</@shiro.hasPermission>
						<@shiro.hasPermission name ="it:delete">
						<button type="button" id="del" class="fr redbg white">删除</button>
						</@shiro.hasPermission>
						<@shiro.hasPermission name ="it:move">
						<button type="button" id="move" class="fr greenbg white">移动</button>
						</@shiro.hasPermission>
						<@shiro.hasPermission name ="it:uploading">
						<button type="button" id="replace" class="fr bluebg white tihuan">替换</button>
						</@shiro.hasPermission>
						<#if "${qx}"=="1">
							<button type="button" id="download" class="fr bluebg white">下载</button>
						</#if>
					</div>
					<div class="itDetaCenterImg mt20 center">
						<#if "${type}"=='1'>
<#--							<div class="photo-bg" style="{background-image: 'url(${imgUrl})' }" ></div>-->
							<img src="${imgUrl}" id="photo" style="max-width: 100%;max-height:900px" >
						<#elseif "${type}"=='2'>
<#--							<source src="${imgUrl}" type="video/mp4" style="width: 100%"></source>-->
							<video controlsList="nodownload" src="${imgUrl}" controls="controls" style="width: 100%"></video>
						</#if>
					</div>
				</div>
				<div class="itDetaFr whitebg mt20 fr">
					<div class="ft20 bold">相关文档</div>
					<ul>
						<#if "${state}"=="1">
							<#list file as related>
								<li>
									<div>${related.fileName}</div>
									<button type="button" url="${related.url}" previewId="${related.id}" onclick="preview(this)">预览</button>
								</li>
							</#list>
						<#elseif "${state}"=="0">
							<li>
								<div>暂无相关文件</div>
							</li>
						</#if>
					</ul>
				</div>
			</div>
		</div>
		<!--JQ-->
		<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
		<!--公用样式JS-->
		<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
		<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/tools/tool.js"></script>
		<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
		<script type="text/javascript" src="${re.contextPath}/pageoffice.js" id="po_js_main"></script>
		<script type="text/javascript" charset="utf-8" src="/plugin/it/common/js/details.js"></script>
		<script type="text/javascript"  charset="utf-8" src="/plugin/it/common/js/itkl.js"></script>
		<script>

			$(function (){
				$("input[name='file']").remove();
				$(".itDeta").css({
					left: $(".Left").width() + 'px',
					top: $(".headerHightAdd").height() + 'px',
					height: ($(document).height() - $(".headerHightAdd").height()) + 'px'
				});
				$(document).parents('iframe').attr('scrolling','no');



				var jsondatas = {
					id:$("#id").val()
				}
				//替换
				layui.use('upload', function() {
					var upload = layui.upload;
					//执行实例
					upload.render({
						elem: '.tihuan'
						,url: '/it/file/replace'
						,data: jsondatas
						,accept:'file'
						, before: function (obj) {
							var files = this.files = obj.pushFile();
							//预读本地文件示例，不支持ie8
							// obj.preview(function (index, file, result) {
							// 	$('#photo').attr('src', result); //图片链接（base64）
							// });
						}, done: function (res,index) {
							if (res.flag ==true) {
								layer.msg("替换成功",{icon:1});
								delete this.files[index];
								setTimeout(function (){
									location.reload(true);
								},1000);
							}else{
								layer.msg('替换失败,'+res.msg,{icon:2});
							}
						}
						, error: function () {

						}
					});
				});
			})
			function flushPage(){
				location.reload(true);
			}
		</script>
	</body>

</html>
